<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=9">
        <link rel="stylesheet" href="<%=basePath %>client/css/cssreset.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/salejihui/css/pagination.css">
        <link rel="stylesheet" href="<%=basePath %>client/css/yunying.css">
       <script src="${pageContext.request.contextPath}/salejihui/js/jquery-1.8.3.min.js"></script>
        <script src="${pageContext.request.contextPath}/client/jss/menu.js"></script>
        <%-- <script src="<%=basePath %>client/jss/jquery.table2excel.js"></script> --%>
        
    </head>
    <style type="text/css">
    table input{
    width:12px;
    height:12px;
    }
    	body{
    		font-family:"微软雅黑";
    	}
		.psxa{
			color:#708dac;
			width:100%;
			line-height:23px;
			text-align: center;
			margin-top:27px;
			font-family: '微软雅黑';
			cursor:pointer;
			font-size:16px;
		}
		.psxa>img:nth-of-type(1){
			position:relative;
			top:4px;
			right:22px;
		}
		a{
         text-decoration:none;
         color:#708dac;
         }
         .daoimg{
         cursor:pointer;
         }
         .buts{
         cursor:pointer;
         }
         .butsa{
         	cursor:pointer;
         }
    </style>
    <body>
    	<header>
    		<p class="pa">客户管理系统CRM</p>
    		<p class="rights">
	    		<img src="../images/user.png" alt="">
	    		${staff.staff_name}
	    		<button  onclick="ind()"></button>
    		</p>
    	</header>
    	<section>
    		<ol class="lefts">
    			<li class="pb">
    				<img src="<%=basePath %>images/Users and permissions.png" alt="">
    				用户和权限
    				<img src="<%=basePath %>images/button (2).png" alt="">
    				<div class="div1">
    					<p class="zcd" id="zcd1"><a href="<%=basePath %>role/page.action">角色管理</a></p>
						<p class="zcd" id="zcd2"><a href="<%=basePath %>staff/selectTree.action">部门/用户管理</a></p>
    				</div>
    			</li>
    			<li class="px">
    				<img src="<%=basePath %>images/canshu.png" alt="">
    				业务参数和设定
    				<img src="<%=basePath %>images/button (2).png" alt="">
    				<div class="div1">
                        <p class="zcd" id="zcd2" name="ppa"><a href="<%=basePath %>rank/select.action">申请性质</a></p> 
                        <p class="zcd" id="zcd2" name="ppa"><a href="<%=basePath %>salestage/select.action">产品类别</a></p>
                        <p class="zcd" id="zcd2" name="ppa"><a href="<%=basePath %>salestage/select.action">来源渠道</a></p>
    				</div>
    			</li>
                <li class="py">
                    <img src="<%=basePath %>images/liucheng.png" />
                    	流程管理
                    <img src="<%=basePath %>images/button (2).png" />
                    <div class="div1">
                        <p class="zcd" id="zcd1"><a href="<%=basePath %>approveRole/select.action">审批流程管理</a></p>
                        <p class="zcd" id="zcd1"><a href="<%=basePath%>approve/count.action?pageSize=2" >已审批流程查看</a></p>
                    </div>
                </li>
                <li class="pxa">
                    <img src="../images/gonggao.png" alt="" width="18px">
                    <a href="../notice/page.action" style="color:#708dac;text-decoration: none;">公告管理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                </li>
                <li class="pxaa">
                    <img src="../client/images/kehu (1).png" alt="">
                    	资源开发
                    <img src="../images/button (2).png" alt="">
                    <div class="div1">
                        <p class="zcd" id="zcd1"><a href="<%=basePath %>client/weifencount.action?zhuizong=0">用户开发</a></p>
                        <p class="zcd" id="zcd2"><a href="../client/findByAllForAgent.action?start=1">代理开发</a></p>
                    </div>
                </li> 
                <%-- <li class="pxas">
    				<img src="../images/kehuzilao.png" alt="">
    				客户资料
    				<img src="../images/button (2).png" alt="">
    				<div class="div1" >
    					<p class="zcd" id="zcd1"><a href="<%=basePath%>client/findByAllData.action?start=1">用户资料</a></p>
						<p class="zcd" id="zcd2"><a href="<%=basePath%>client/findByAllData.action">代理资料</a></p>
    				</div>
    			</li> --%>
    			<li class="psxa">
    				<img src="../images/operation-management.png" alt="" width="16px" class="ims">
    				<a href="<%=basePath %>Operate/count1.action" style="color:#fff;">运营管理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
    			</li>
    		</ol>
    		<div class="righta">
    			<div class="smalls">
    				<ul>
		    			<li name="oli">
		    				<p class="hangye">运营管理</p>
		    				<div class="daohan">
		    				    <form action="<%=basePath %>Operate/count1.action" method="post" style="float:left;">
		    						<input type="text" id="select" placeholder="按帐号,名称查找" name="condition" value="${condition}">
		    						<button type="submit" >搜索</button>
		    					</form>
		    					<span>已选中<span id="number"></span>项</span>
		    					<span>|</span>
		    					<span onclick="updatePage()">编辑</span>
		    					<span onclick="del()">删除</span>
		    					<button class="imgx" style="vertical-align:middle;"></button>
		    					<button class="imgd" style="vertical-align:middle;"></button>
		    					<!-- <div class="dia">
		    						<p class="daoru">导入账户</p>
                                	<p class="daochu" onclick="exportClient()">导出账户</p>
		    					</div> -->
		    				</div>
		    				<table>
		    					<thead>
		    						<tr>
		    							<td><input type="checkbox"  id="selectCheck" onclick="selectCheck()"></td>
		    							<td>编码</td>
		    							<td>名称</td>
		    							<td>负责人</td>
		    							<td>微信帐号</td>
		    							<td>账号</td>
		    							<td>密码</td>
		    							<td>类别</td>
		    							<td>备注</td>
		    						</tr>
		    					</thead>
		    					<tbody id="list">
		    						
		    					</tbody>
		    				</table>
		    			</li>
		    		</ul>
                    <div class="M-box" style="width:40%;margin:0px auto;"></div>
    			</div>
    		</div>    		
    	</section>
    	<div class="smallsa"></div>
    	<div class="divaa">
    		<p class="paa">&nbsp;&nbsp;&nbsp;&nbsp;分配角色<span class="guan"><img src="../images/guanbi.png" alt=""></span></p>
			<form action="" method="">
				<p class="pab">分配对象:李嘉存</p>
				<p class="pac"><input type="radio" name="qianxian">默认管理员</p>
				<p class="pad"><input type="radio" name="qianxian">默认普通用户</p>
				<p class="pae"><input type="radio" name="qianxian">默认普通经理</p>
				<p class="paf"><input type="submit" value="确定"></p>
			</form>
    	</div>
    	<div class="xinjian">
    		<p>新建账号<img src="../images/guanbi.png" alt="" class="xinjianimg"></p>
    		<form action="javascript:save()" method="post" onsubmit="return te()">
    			<input type="hidden" class="name" id="staffId" name="staffId"
									value="${staff.staff_id}">
    			<p>名称<input type="text" id="mingcheng" class="names"><span>*</span></p>
    			<p>账号<input type="text" id="zhanghao" class="users" name="username"><span>*</span></p>
    			<p>负责人&nbsp;&nbsp;<input type="text" id="rPersons" class="rPersons" name="rPersonname" style="margin-left:30px;"><span>*</span></p>
    			<p>微信账号<input type="text" id="weixins" class="wxusers" name="winxinhaoname" style="margin-left:20px;"><span>*</span></p>
    			<p>密码<input type="password" id="mima" name="password"  class="pass"><span>*</span></p>
    			<p>类别<input type="text" id="leibie" class="sorts">&nbsp;&nbsp;&nbsp;&nbsp;</p>
    			<p><span>备注</span><textarea id="contractContent" name="" rows="30" cols="10"></textarea>&nbsp;&nbsp;&nbsp;&nbsp;</p>
    			<p><input type="submit" value="确定"></p>
    		</form>
    	</div>
    	<div class="dao">
            <p>导入数据<img src="../images/guanbi.png" alt="" class="daoimg"></p>
            <div>
                <p>仅支持以逗号为分隔符的文本文件【filename.csv】,文件最大10MB。请按照数据模板的格式导入数据,模板中的表头名称不可更改,表头行不能删除。</p>
                <p><a href="">下载数据模板</a></p>
                <form id="upload-form" action="" method="post" enctype="multipart/form-data" >
                　　<div>
                        <p>请选择需要导入的csv文件</p>
                        <p><input type="file" name="upload"/></p>
                    </div>
                    <p>上传文件可能需要几分钟，取决于文件大小和网速</p>
                　　<p><input type="button" value='取消' class="buts"><input type="submit" value="开始导入" class="butsa"/></p>
                </form>
            </div>
        </div>
        <div class="chengo">
        	<p>导入成功</p>
        	<div>
        		<p>仅支持以逗号为分隔符的文本文件【filename.csv】,文件最大10MB。请按照数据模板的格式导入数据,模板中的表头名称不可更改,表头行不能删除。</p>
        		<p><button>确定</button></p>
        	</div>
        </div>
        <div class="bianji">
    		<p>编辑账号<img src="../images/guanbi.png" alt="" class="bianjiimg"></p>
    		<form action="javascript:updatezhanghao()" method="post" onsubmit="return textas()">
    		<input type="hidden" class="name" id="yunyingid" name="staffId"
									value="">
    			<p>名称<input type="text" id="usernameas" class="usernameas"><span>*</span></p>
    			<p>账号<input type="text" id="zhang" class="namess"><span>*</span></p>
    			<p>负责人&nbsp;&nbsp;<input type="text" id="rPersonsa" class="rpersonas" name="rpersonasname"  style="margin-left:30px;"><span>*</span></p>
    			<p>微信账号<input type="text" id="winxinhaoa" class="wxuserss" name="winxinhaosname"  style="margin-left:20px;"><span>*</span></p>
    			<p>密码<input type="password" name="password" id="password" class="passwords"><span>*</span></p>
    			<p>类别<input type="text" id="lei">&nbsp;&nbsp;&nbsp;&nbsp;</p>
    			<p><span>备注</span><textarea name="" id="bei" rows="30" cols="10"></textarea>&nbsp;&nbsp;&nbsp;&nbsp;</p>
    			<p><input type="submit" value="确定"></p>
    		</form>
    	</div>
    </body>
     <script src="${pageContext.request.contextPath}/salejihui/js/jquery.pagination.js"></script>
    <script>
    function ind(){
    	window.location.href= "../notice/findByAll.action"
    }
		   $('.M-box').pagination({
		    	pageCount: ${PageCount},//总页数
				current: ${PageNum},//当前页码
			callback:function(api){
				var pageNum=api.getCurrent();
				  var condition="${condition}";
				var name="${select}";
		        $.ajax({  
		            type : "POST",  
		            url : "<%=basePath%>Operate/findhoutaioperate.action",//路径  
		            data : {  
		            	pageNum : api.getCurrent(),
		            	name  : name,
		            	"condition" : condition
		            },
		            success : function(data) {
		            	var number=data[0].number;//总页数
		            	api.setPageCount(number);//动态修改总页数为20页
		            	var pageNum=data[0].pageNum;
		            	var text="";
		            	$('.tt').remove();
		              for(var i=0;i<data[0].list.length;i++){
		            	  text=$('<tr class="tt"><td><input type="checkbox" value="'+data[0].list[i].opid+'"  name="items" onclick="checkedShow()"></td><td>'+data[0].list[i].opid+'</td><td>'+data[0].list[i].oUsername+'</td><td>'+data[0].list[i].rPerson+'</td><td>'+data[0].list[i].winxinhao+'</td><td>'+data[0].list[i].oLoginName+'</td><td>'+data[0].list[i].oPassword+'</td><td>'+data[0].list[i].leixing+'</td><td>'+data[0].list[i].beizhu+'</td></tr>');
		                    $('#list').append(text);
		                  }
		            }
		        });  
		    }
			},function(api){
			    var pageNum;
			    var selectd="${select}";
			    var condition="${condition}";
			    $.ajax({  
			        type : "POST",  
			        url : "<%=basePath%>Operate/findhoutaioperate.action",//路径  
			        data : {  
			        	pageNum : api.getCurrent(),
			        	name  : selectd,
			          "condition" : condition
			        },
			        success : function(data) {		     
			        	var number=data[0].number;//总页数
			        	api.setPageCount(number);//动态修改总页数为20页
			        	var pageNum=data[0].pageNum;
			        	var text="";  
			            for(var i=0;i<data[0].list.length;i++){
			            	console.log(data);
			            	 text=$('<tr class="tt"><td><input type="checkbox" value="'+data[0].list[i].opid+'"  name="items" onclick="checkedShow()"></td><td>'+data[0].list[i].opid+'</td><td>'+data[0].list[i].oUsername+'</td><td>'+data[0].list[i].rPerson+'</td><td>'+data[0].list[i].winxinhao+'</td><td>'+data[0].list[i].oLoginName+'</td><td>'+data[0].list[i].oPassword+'</td><td>'+data[0].list[i].leixing+'</td><td>'+data[0].list[i].beizhu+'</td></tr>');
			                    $('#list').append(text);
			                  }                               	
			        }
			    });  
			});
    
	function sousuo() {
		var name=$("#select").val();
		location = "${pageContext.request.contextPath}/Operate/count1.action?select="+name;
	}
    
	 function save(){
	var url="${pageContext.request.contextPath}/Operate/insertoperate.action";
			var pam={
					oUsername:$("#mingcheng").val(),
					oLoginName:$("#zhanghao").val(),
					oPassword:$("#mima").val(),
					leixing:$("#leibie").val(),
					beizhu:$("#contractContent").val(),
					staffId : $("#staffId").val(),
					winxinhao:$("#weixins").val(),
					rPerson:$("#rPersons").val()
				};
			$.post(url,pam,function(data){
				if (data == "success") {
				alert("新建成功");
				location = "${pageContext.request.contextPath}/Operate/count1.action";
				} else {
				alert("新建失败，页面发生错误");
				}
		}); 
	    }
	 function updatePage(){
		 var delid=null;
		 if($("input[name='items']:checked").length=='1'){
			 delid= $("input[name='items']").val();
		    		$('.bianji').css("display","block");
		    		$(".smallsa").css("display","block");
		 }else{
			 alert("只能选择一项来编辑");
			 return;
		 }
	      	   $.ajax({
	   				type:"post",
	   				data:"id="+delid,
	   				url:"<%=basePath %>Operate/findidoperate.action",
	   				success:function(data){
	   					var json = eval("("+data+")");
	   					$("#yunyingid").val(json[0].opid);
	   					$("#usernameas").val(json[0].oUsername);
	   					$("#zhang").val(json[0].oLoginName);
	   					$("#password").val(json[0].oPassword);
	   					$("#lei").val(json[0].leixing);
	   					$("#bei").val(json[0].beizhu);
	   					$("#winxinhaoa").val(json[0].winxinhao);
	   					$("#rPersonsa").val(json[0].rPerson);
	   					
	  				},
	  				error:function(e){
	  					alert("发生未知错误请刷新页面");
	  				}
	   		 });
	  		
	  	}
	 
	 //编辑
	 function updatezhanghao(){
			var url="${pageContext.request.contextPath}/Operate/updateoperate.action";
					var pam={
							oUsername:$("#usernameas").val(),
							oLoginName:$("#zhang").val(),
							oPassword:$("#password").val(),
							leixing:$("#lei").val(),
							beizhu:$("#bei").val(),
							opid : $("#yunyingid").val(),
							winxinhao:$("#winxinhaoa").val(),
							rPerson:$("#rPersonsa").val()
						};
					$.post(url,pam,function(data){
						if (data == "编辑成功") {
						alert(data);
						location = "${pageContext.request.contextPath}/Operate/count1.action";
						} else {
						alert("编辑失败，页面发生错误");
						}
				}); 
			    }
	 
 	//模糊查询判断为空
function selectBy(){
alert($("#select").val());
	var vals = $("#select").val();
	if(vals == ""){
	alert("不能为空");
		return false;
	}else{
	return true;
	}
}

function del(){
var delid="";
var num=0;
$("input[name='items']").each(function(){
	if($(this).attr("checked")){
		num++;
		delid+=$(this).val()+",";
	}
});		
var url="${pageContext.request.contextPath}/Operate/deleteManyId.action";
			var pam={
					delid:delid
					};
			
			$.post(url,pam,function(data){		
					location="${pageContext.request.contextPath}/Operate/count1.action";
		}); 
	    }
    
    
    	
    	
    	$(".bianjiimg").click(function(){
    		$('.bianji').css("display","none");
    		$(".smallsa").css("display","none");
    	})
    	 $(".imgd").click(function(){
    		$('.xinjian').css("display","block");
    		$(".smallsa").css("display","block");
    	}) 
    	$(".xinjianimg").click(function(){
    		$('.xinjian').css("display","none");
    		$(".smallsa").css("display","none");
    	})
    	function te(){
    		var names=$(".names").val();
    		var users=$(".users").val();
    		var pass=$(".pass").val();
    		var p=/\s/;
    		if(names==""||p.test(names)){
    			alert("请输入姓名！");
    			return false;
    		}else if(users==""||p.test(users)){
    			alert("请输入账号！");
    			return false;
    		}else if(pass==""||p.test(pass)){
    			alert("请输入密码！");
    			return false;
    		}
    		return true;
    	}
    	function textas(){
    		var usernames=$(".usernames").val();
    		var namess=$(".namess").val();
    		var passwords=$(".passwords").val();
    		var p=/\s/;
    		if(usernames==""||p.test(usernames)){
    			alert("姓名不能为空！");
    			return false;
    		}else if(namess==""||p.test(namess)){
    			alert("账号不能为空！");
    			return false;
    		}else if(passwords==""||p.test(passwords)){
    			alert("密码不能为空！");
    			return false;
    		}
    		return true;
    	}
    	
    	/*选中状态改变导航栏里面的span*/
    	function selectCheck(){
	    	   var judge = $("#selectCheck").val();
	    	   var objs = document.getElementsByName("items");
			   if(judge == 1){
				   for(var i = 0,l = objs.length;i < l;i++){
		    		   objs[i].checked = true;
		    	   }
				   $("#selectCheck").val(0);
	    	   }else{
	    		   for(var i = 0,l = objs.length;i < l;i++){
		    		   objs[i].checked = false;
		    	   }
	    		   $("#selectCheck").val(1);
	    	   }
	    	   
	    	   checkedShow();
	       }
		  	
		  	function checkedShow(){
		  		
		  		var str = "";
	    	    var number = 0;
	    	    var obj = document.getElementsByName("items");
				for(var i = 0,l = obj.length;i < l;i++){
					if(obj[i].checked){
						str += obj[i].value+",";
						number++;
					}
				}    	   
	    			
	    	    if(str == ""){
	    	    	$('.daohan>span').css('display', 'none');
	    		   
	    		  
	    	    }else{
	    		   $("#number").html(number);
	    		   $('.daohan>span').css('display', 'inline');
	    		   
	    		  
	    	   }
		  	}
		  	$(".imgx").click(function(){

		 		if($(".dia").css("display")=="none"){

		 		$(".dia").show();

		 		}else{

		 		$(".dia").hide();

		 		}

		 		});
		  	$('.dia>p:nth-of-type(1)').click(function(event) {
	            $('.dao').css('display', 'block');
	            $('.smallsa').css('display', 'block');
	        });
		  	$('.daoimg').click(function(event){
		  		$('.dao').css('display', 'none');
	            $('.smallsa').css('display', 'none');
		  	})
		  	$('.buts').click(function(event){
		  		$('.dao').css('display', 'none');
	            $('.smallsa').css('display', 'none');
		  	})
		  	 $(function() {
		            $(".daochu").click(function(){
		                $("table").table2excel({
		                    exclude: ".noExl",
		                    name: "Excel Document Name",
		                    filename: "myFileName",
		                    exclude_img: true,
		                    exclude_links: true,
		                    exclude_inputs: true
		                });
		            });
		            
		        });
    </script>
    
</html>